<!-- 封装echarts组件 -->
<template>
  <div :id="chartId" :style="[{ 'width': '100%' }, { 'height': height + 'px' }]"></div>
</template>
<script>

import resize from './mixins/resize.js'


let chart = null
export default {
  mixins: [resize],
  name: 'Eline',
  props: {
    height: {
      type: Number,
      default: 200
    },
    theme: {
      type: String,
      default: 'light'
    },
    option: {
      type: Object,
      default: function() {
        return {}
      }
    },
    chartData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    healthDev: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultOption: {
        title: {
          left: 'left'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line', // 'line' 直线指示器 'shadow' 阴影指示器'none' 无指示器'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
            label: {
              backgroundColor: '#6a7985'
            }
          },
          color: '',
          borderWidth: 1, // 边框宽度设置1
          borderColor: '', // 设置边框颜色
          textStyle: '',
          extraCssText: '',
          formatter: function(param) {
            return defaultFormatter(param, '#40a9ff')
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          }
        },
        legend: {
          data: []
        },
        series: {
          type: 'line',
          color: '',
          areaStyle: {},
          smooth: 0.6,
          symbol: 'emptyCircle',
          symbolSize: 1,
          itemStyle: {
            color: '#D84115'
          },
          lineStyle: { // 线的颜色
            color: '#D84115',
            width: 2,
            type: 'solid'
          },
          data: [],
          animation: false
        }
      }
    }
  },
  computed: {
    chartId: function() {
      return 'Ebar-' + Math.random().toString(36).substr(2)
    }
  },

  watch: {
    option: {
      deep: true,
      handler(newVal, oldVal) {
        if (!this.charts) {
          this.initEcharts(chart)
        }
        this.charts.clear()
        if (newVal) {
          this.charts.setOption(newVal,true)
        } else {
          if (oldVal) {
            this.charts.setOption(oldVal,true)
          } else {
            this.charts.setOption(defaultOption,true)
          }
        }
      }
    },
    chartData: {
      deep: true,
      handler(val) {
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.initEcharts(chart)
      // 点击事件
      this.charts.on('click', (params) => {
        let timeItem
        if (this.chartData && this.chartData.observe_time) timeItem = this.chartData.observe_time.data[params.dataIndex]
        if (this.healthDev === 'healthAsset') {
          const paramsIndex = this.chartData.modifyTime.indexOf(params.name)
          this.$store.commit('asset/SET_ASSET_HEALTH_DETAIL_INFO',{
            event_id:  this.chartData.eventID[paramsIndex],
            titleArr:  this.chartData.titleArr[paramsIndex],
            modifyTime: params.name,
            index: paramsIndex
          })
        } else if (this.healthDev === 'healthDev') {
          const paramsIndex = this.chartData.modifyTime.indexOf(params.name)
          this.$store.commit('site/SET_COMPOSITE_POINT_LINT_INFO',{
            event_id:  this.chartData.eventID[paramsIndex],
            titleArr:  this.chartData.titleArr[paramsIndex],
            modifyTime: params.name,
            index: paramsIndex
          })
        } else if (this.healthDev === 'siteItemId') {
          const idItem = this.chartData.id[params.dataIndex]
          this.$store.commit('app/SET_SITE_LINE_OBJ', idItem)
        } else if (this.healthDev === 'devItemId') {
          const idItem = []
          idItem[0] = this.chartData.id[params.dataIndex]
          idItem[1] = this.chartData.observe_time.data[params.dataIndex]
          this.$store.commit('app/SET_DEV_LINE_OBJ', idItem)
        }
      })
    })
  },
  activated() {
  },
  beforeUnmount() {
    // if (!chart) {
    //   return
    // }
    // chart.dispose()
    // chart = null
  },
  methods: {
    // 初始化echarts实例
    initEcharts(chart) {
      if (chart) {
        chart.dispose()
        chart = null
      }
      chart = echarts.init(this.$el)
      chart.clear() // 因为清空了echarts的数据，所以再次渲染
      this.charts = chart
      if (!this.option || !this.option.series) {
        chart.setOption(this.defaultOption,true)
      } else {
        chart.setOption(this.option,true)
      }
    }
  },
}
</script>

